.spirit_icon {
    width: 60px;
    height: 60px;
    background-size: 100% auto;
    display: block;
    cursor: pointer;
}

.spirit_icon:hover {
    animation: spirit_icon 0.6s steps(24) forwards;
}

.spirit_icon:not(:hover) {
    animation: spirit_icon_reverse 0.6s steps(24) forwards;
}

@keyframes spirit_icon {
    from {
        background-position-y: 0;
    }

    to {
        background-position-y: -1440px;
    }
}

@keyframes spirit_icon_reverse {
    from {
        background-position-y: -1440px;
    }
    to {
        background-position-y: 0;
    }
}

/*使用方式：<i class="spirit_icon s_barrel"/>*/
.s_barrel {
    background-image: url("@/assets/icons/spirit_icons/Barrel.png");
}

.s_cloud {
    background-image: url("@/assets/icons/spirit_icons/Cloud.png");
}

.s_code {
    background-image: url("@/assets/icons/spirit_icons/Code.png");
}

.s_core {
    background-image: url("@/assets/icons/spirit_icons/Core.png");
}

.s_cube {
    background-image: url("@/assets/icons/spirit_icons/Cube.png");
}

.s_cycle {
    background-image: url("@/assets/icons/spirit_icons/Cycle.png");
}

.s_files {
    background-image: url("@/assets/icons/spirit_icons/Files.png");
}

.s_globe {
    background-image: url("@/assets/icons/spirit_icons/Globe.png");
}

.s_histogram {
    background-image: url("@/assets/icons/spirit_icons/Histogram.png");
}

.s_safe {
    background-image: url("@/assets/icons/spirit_icons/Safe.png");
}

.s_store {
    background-image: url("@/assets/icons/spirit_icons/Store.png");
}

.s_three_box {
    background-image: url("@/assets/icons/spirit_icons/ThreeBox.png");
}

.s_video {
    background-image: url("@/assets/icons/spirit_icons/Video.png");
}

.s_wifi {
    background-image: url("@/assets/icons/spirit_icons/WiFi.png");
}

